<template>
  <div class="menubar wrapper-box">
    <div class="left">
      <img :src="srcImg" />
      <span>TS-增删改查</span>
    </div>
    <div class="right">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">新建</el-menu-item>
        <el-submenu index="2">
          <template slot="title">全部</template>
          <el-menu-item index="2-1">工作</el-menu-item>
          <el-menu-item index="2-2">学习</el-menu-item>
          <el-menu-item index="2-3">生活</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;

  srcImg = require("../assets/logo.png");
  activeIndex = "0";

  handleSelect(e: any) {
    if(e == 1) {
        this.addFile()
    }
  }

  addFile = () => {
    this.$store.state.isModalShow = true;
    let addMeno = {
      id: -1,
      categoryId: 0,
      title: '',
      content:'',
      createTime: ''
    }
    this.$store.commit("showEditMeno",addMeno)
  };
}
</script>

<style scoped lang="less">
.menubar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 200px;
    display: flex;
    align-items: center;
    color: #666;
    img {
      height: 60px;
      width: 60px;
    }
  }
}
</style>